<template>
  <div id="app">
    <GoodsInput @add="handleAdd" @search="handleSearch" :oldGoodsList="oldGoodsList"/>
    <GoodsTable :goodsList="goodsList" @del="handleDel" />
  </div>
</template>

<script>
import GoodsInput from "./GoodsInput.vue";
import GoodsTable from "./GoodsTable";
export default {
  data() {
    return {
      goodsList: [
        {
          id: 1,
          code: 1,
          imgSrc:
            "https://tse1-mm.cn.bing.net/th/id/R-C.fc48d5b3c65b7b79980ab09dfc2890d8?rik=jy07dRFBQAwjzw&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190322%2fe2edee9d2ee847f0b564fcbadf356a46.jpeg&ehk=cKT9XpGfozyLcO5sia93t8gLeJurN9RM%2boqkkCk6a7Q%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
          productName: "坤坤的背带裤",
          price: 9.9,
          count: 1,
        },
        {
          id: 2,
          code: 2,
          imgSrc:
            "https://tse3-mm.cn.bing.net/th/id/OIP-C.U2zPWJK7Gus24zXyQWwi0AHaEG?pid=ImgDet&rs=1",
          productName: "品如的衣服",
          price: 19.9,
          count: 1,
        },
        {
          id: 3,
          code: 3,
          imgSrc:
            "https://static1.paizi.com/uploadfile/2018/0710/20180710095354871.jpg",
          productName: "秀儿的秋裤",
          price: 9.9,
          count: 1,
        },
      ],
      oldGoodsList:[]
    };
  },
  created(){
    this.oldGoodsList=[...this.goodsList];
  },
  components: {
    GoodsInput,
    GoodsTable,
  },
  methods: {
    handleSearch(input){
      this.goodsList=input;
    },
    handleAdd(input) {
      this.goodsList.push(input);
    },
    handleDel(input) {
      this.goodsList.splice(input, 1);
    },
  },
};
</script>

<style scoped>
#app {
  width: 600px;
  margin: 10px auto;
}
</style>